<template>
	<view class="order flex-bect">
    <scroll-view scroll-y="true" class="left">
      <view v-for="(item, index) in days" :key="index" class="dd" :class="{on : mouth === item.day}" @click="changeMonth(item.day)">{{item.day_m}}</view>
    </scroll-view>
    <view class="right">
      <view class="tab flex-bect">
        <view v-for="item in tabs" :key="item.id" class="dd" @click="setTabId(item.id)" :class="{on: tabId === item.id}">{{item.name}}</view>
      </view>
      <view class="top flex-bect">
        <!-- <view>订单总额：{{topInfo.total_price}}元</view> -->
        <view>我的收益：{{topInfo.store_price}}元</view>
      </view>
      
      <scroll-view scroll-y="true" class="right-box" v-if="data_list.length > 0" @scrolltolower="addMore" lower-threshold="100px">
        <view v-for="(item, index) in data_list" :key="item.id" class="dd">
          <view class="p p1">{{item.order_no}}</view>
          <view class="p p2 flex-lect">
            <text class="lab">行李：</text>
            <view class="flex-lect li" v-if="item.trunk_number > 0">
              <!-- <image src="../../static/image/index/zb-ico2.png" class="ico"></image> -->
              行李箱
              <view class="sign">×</view>
              <view class="num">{{item.trunk_number}}</view>
            </view>
            
            <view class="flex-lect li" v-if="item.packsack_number > 0">
              <!-- <image src="../../static/image/index/zb-ico3.png" class="ico"></image> -->
              背包
              <view class="sign">×</view>
              <view class="num">{{item.packsack_number}}</view>
            </view>
          </view>
          <view class="p p4"><text class="lab">日期：</text>{{item.start_time}} ~ {{item.end_time}}</view>
          <view class="p p4"><text class="lab">天数：</text>{{get_day_num(item)}}天</view>
          <view class="p p4"><text class="lab">完成日期：</text>{{item.finish_time_text}}</view>
          
          <view class="flex-bect p" v-if="item.mobile">
            <view class="p3 flex1"><text class="lab">电话：</text>{{getPhone(item.mobile)}}</view>
            
          </view>
          <view class="p p5"><text class="lab">收入：</text><text class="red">￥{{item.merchants_amount}}</text></view>
          <view class="images">
            <view class="flex-lect" style="flex-wrap: wrap;">
              <image v-for="(items,i) in item.images_text" :key="i" :src="items" mode="aspectFill" @click="previewImg(item.images_text,item.url)" style="width: 31%; height: 140rpx; margin: 0 16rpx 16rpx 0;"></image>
            </view>
            <view class="up-btn" @click="showPup(item, index)" v-if="item.status === 1 && !item.images_list">
              <v-upload></v-upload>
              <view class="bg"></view>
            </view>
          </view>
          <view class="btns">
            <view class="zb-btn zb-btn1" @click="call(item.mobile)">联系客户</view>
            <view class="zb-btn zb-btn2" @click="endOrder(item.id, index)" v-if="item.status === 2">结束订单</view>
          </view>
        </view>
        <view class="flex7 font_27 color_999 color_ff6a00" style="height: 100rpx;">{{Text}}</view>
      </scroll-view>
      <!-- <view class="no" v-if="data_list.length === 0" style="">暂无数据</view> -->
    </view>
    
    <view class="pup" v-show="tuiShow">
      <view class="boxs">
        <view class="tit">订单号：{{order_no}}<view class="close" @click="tuiShow = false"> <image src="../../static/image/user/close.png" class="ico" mode=""></image> </view></view>
        <scroll-view scroll-y="true" class="photo">
          <view class="p3">*拍照表示用户已到店寄存。若用户忘记拍照或无法拍照，请商户拍摄该用户的行李照片。</view>
          <view class="paiz">
            <v-upload @getImages="getqjList"></v-upload>
          </view>
          <view class="p1">请按下方示例正确拍摄照片</view>
          <image src="../../static/image/user/1.png" class="img1" mode=""></image>
          <view class="txts flex-bect">
            <view class="p2">1、请将无包游“行李牌”系在您的行李上</view>
            <view class="p2">2、拍摄行李照片并上传(行李牌编号，请拍摄清晰)</view>
          </view>
          
        </scroll-view>
        <view class="btn" @click="refund()" :class="{on: getqjList.length > 0}">确定</view>
      </view>
    </view>
    
    
  </view>
</template>

<script>
  import upload from '@/components/upload.vue';
	export default {
    components: {
      'v-upload':upload
    },
		data() {
			return {
				tabs:[{name:'全部', id:0},{name:'待存放', id:1},{name:'待取件', id:2}],
				tabId:0,
				code: "",
				Text: '',
				
				is_load: false,
				seletect_order_info: {},
				is_show: false,
				top_tab_active: 0,
				is_time_show: false,
				is_last_page: false,
				minDate: new Date().getTime(),
				currentDate: new Date().getTime(),
				top_tab_list: [{
					id: 1,
					name: '待存放'
				}, {
					id: 2,
					name: '待取件'
				}, {
					id: 0,
					name: '全部'
				}, ],
        
        
        
        order_no:'',
        order_id:'',
        tuiShow:false,
        mouth: '',
        page: 1,
        data_list: [],
        status:0,
        days:null,
        qjList:[],
        topInfo:{},
        endOrderCan:true,
        jicunIndex:null
			}
		},
		onLoad() {
      getApp().get_loading();
			this.mouth = this.get_date(new Date().getTime());
			this.getOrdersList();
      this.getDay()
		},
		onShow() {
			if (uni.getStorageSync('merchantList')) {
				this.Text = '';
				this.page = 1;
				this.data_list = [];

				getApp().get_loading();
				this.getOrdersList();

				uni.removeStorageSync('merchantList');
			}
		},
		onReachBottom() { //上拉加载
			if (!this.is_last_page) {
				this.page++;
				this.Text = '加载中...';
				this.getOrdersList();
			}
		},
		methods: {
      previewImg(list,url){
        uni.previewImage({
          urls: list,
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
        
      },
      setTabId(e){
        this.tabId = e;
        this.page = 1;
        this.data_list = [];
        
        getApp().get_loading();
        this.getOrdersList();
      },
      addMore(){
        console.log('下拉加载')
        if (!this.is_last_page) {
        	this.Text = '加载中...';
        	this.getOrdersList();
        }
      },
      // 切换月份
      changeMonth(e){
        this.mouth = e;
        this.data_list = [];
        this.page = 1;
        this.getOrdersList()
      },
      // 结束订单
      endOrder(order_id,index){
        console.log('结束订单')
        if(!this.endOrderCan) return;
        this.endOrderCan = false;
        uni.showModal({
          title:"提示",
          content:"确定结束该笔订单",
          success: (e) => {
            this.endOrderCan = true
            if(e.confirm){
              this.$http.post(this.$api.closeOrderByManagerApi, {orders_id: order_id}).then(res=>{
                getApp().get_msg('操作成功');
                this.data_list[index].status = 3
              })
            }
          },
          fail: () => {
            this.endOrderCan = true
          }
        })
      },
      call(e){
        uni.makePhoneCall({
        	phoneNumber: e
        });
      },
      showPup(e, index){
        this.tuiShow = true; 
        this.order_no = e.order_no;
        this.order_id = e.id;
        if(index > -1){
          this.jicunIndex = index
        }else{
          this.jicunIndex = null;
        }
      },
      // 上传照片
      refund(){
        if(this.qjList.length === 0) return getApp().get_msg('请上传图片');
        const images = this.qjList.map(m => {return m.url});
        console.log('images===>',images,this.qjList);
        uni.showModal({
          title:"提示",
          content:"确定上传的图片符合要求",
          success: (e) => {
            if(e.confirm){
              this.data_list[this.jicunIndex].status = 2
              this.$http.post(this.$api.updateImageByManagerApi, {orders_id: this.order_id, images: images.join(',')}).then(res=>{
                getApp().get_msg('操作成功');
                this.tuiShow = false;
                this.data_list[this.jicunIndex].status = 2
              })
            }
          }
        })
        
        
      },
      getPhone(e){
        return e.substring(0,3)+'****'+ e.substring(7,11)
      },
      // 获取上传的图片信息
      getqjList(e){
        this.qjList = e;
      },
      //获取展示的月份
      getDay(){
        this.$http.post(this.$api.getMonthListApi, {}).then(res=>{
          this.days = res.data.map(m=>{
            const item = {
              day:m,
              day_text:m.substring(2,8).replace('-','年')+'月',
              day_m:m.substring(5,8)+'月'
            };
            return item
          });
          console.log(this.days)
        })
      },
			// 商家订单
			getOrdersList() {
				this.$http.post(this.$api.getStoreOrdersListApi, {
          page:this.page,
					month: this.mouth,
          type_id:this.tabId
				}).then(res => {
					this.is_load = true;
          res.data.list.data.map(m=>{
            // m.images = '/uploads/20230215/e5e7d1a65d362e6c1c3cfd9ba904f933.jpg'
            if(m.images){
              m.images = m.images.split(',');
              m.images_list = m.images.map(j=>{
                return { url:j}
              })
            }
            return m
          })
					this.data_list = this.data_list.concat(res.data.list.data);
          console.log('data_list===>',this.data_list, res)
          this.topInfo = res.data.amount_money;
					if (this.page == res.data.list.last_page) {
						this.is_last_page = true;
						this.Text = '已加载全部'
					} else {
						this.is_last_page = false;
            this.page = this.page + 1;
					}
				})
			},
			
       // 解析天数
      get_day_num(e) {
        console.log(e)
        const ent = e.end_time.replace('年','/').replace('月','/').replace('日','');
        const start = e.start_time.replace('年','/').replace('月','/').replace('日','')
        const end_t = new Date(ent).getTime()
        const start_t = new Date(start).getTime()
      	const d_ = (end_t - start_t) / 86400000;
      	const days = Math.ceil(d_) + 1;
        return days
      },
      
      //获取当前月
      get_date(value) {
      	var date = new Date(value);
      	var Y = date.getFullYear();
      	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
      	var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      	var h = date.getHours();
      	var m = date.getMinutes();
      	var s = date.getSeconds();
      
      	return Y + '-' + M;
      },
      
      
      // 转天 时间 分钟
      get_day_time(e) {
      	let self = this;
      	let time_num = '';
      
      	var s1 = new Date(e.replace(/-/g, "/")),
      		s2 = new Date(),
      		runTime = parseInt((s2.getTime() - s1.getTime()) / 1000);
      	var year = Math.floor(runTime / 86400 / 365);
      	runTime = runTime % (86400 * 365);
      	var month = Math.floor(runTime / 86400 / 30);
      	runTime = runTime % (86400 * 30);
      	var day = Math.floor(runTime / 86400);
      	runTime = runTime % 86400;
      	var hour = Math.floor(runTime / 3600);
      	runTime = runTime % 3600;
      	var minute = Math.floor(runTime / 60);
      	runTime = runTime % 60;
      	var second = runTime;
      
      	if (year) {
      		time_num = year + '年' + month + '月' + day + '天' + hour + '小时' + minute + '分钟';
      	} else if (month) {
      		time_num = month + '月' + day + '天' + hour + '小时' + minute + '分钟';
      	} else if (day) {
      		time_num = day + '天' + hour + '小时' + minute + '分钟';
      	} else if (hour) {
      		time_num = hour + '小时' + minute + '分钟';
      	} else if (minute) {
      		time_num = minute + '分钟';
      	}
      
      	return time_num;
      },
      
		}
	}
</script>

<style lang="less">
	@import url("/static/css/top.css");
  
  .no{display: flex; align-items: center; justify-content: center; width: 100%; height: 30vh; color: #666;}
  .pup{
    position: fixed; width: 100%; height: 100%; z-index: 999; background-color: rgba(0,0,0,0.3); left:0; top: 0;
    view{box-sizing: border-box;}
    .boxs{width: 100%; padding: 0 3% 40rpx; position: absolute; left: 0; bottom: 0; z-index: 1; background-color: #fff; border-radius: 10rpx 10rpx 0 0;}
    .tit{font-size: 30rpx;  border-bottom: 1px solid #ededed; margin-bottom: 20rpx; font-weight: bold; display: flex; align-items: center; justify-content: space-between;}
    .close{width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center;}
    .ico{width: 40rpx; height: 40rpx;}
    .btn{
      display: flex; align-items: center; justify-content: center; border-radius: 6rpx; margin-top: 20rpx; height: 70rpx; font-size: 28rpx; margin-top: 40rpx; background-color: #dadada; color: #fff;
      &.on{background-color: #FF6A00; color: #fff; }
    }
    .paiz{border: 2px dotted #ededed; padding: 16rpx; padding-bottom: 0;}
    .photo{
      max-height: 60vh;
      .p1{font-weight: bold; font-size: 30rpx; margin: 40rpx 0 20rpx;}
      .img1{width: 100%; height: 260rpx;}
      .p2{color: #666; width: 48%; margin-top: 16rpx; font-size: 26rpx;}
      .p3{color: red; font-size: 26rpx; margin: 0 0 20rpx;}
    }
  }
  view{box-sizing: border-box; font-size: 30rpx;}
  .left{
    width: 160rpx; background-color: #f5f5f5; height: 100vh;
    .dd{display: flex; align-items: center; height: calc( 100vh/11 ); padding: 0 20rpx; width: 100%; justify-content: center; font-size: 30rpx; font-weight: bold;}
    .on{background-color: #fff;}
  }
  .right{
    height: 100vh; flex: 1; width: 100%; position: relative;
    .top{height: 80rpx; padding: 0rpx 20rpx 0; box-shadow: 0 0 8rpx #ddd;}
    .tab{padding: 0 10%; border-bottom: 10rpx solid #f5f5f5;
      .dd{width: 30%; line-height: 80rpx; text-align: center; font-weight: bold;
        &.on{color: #FF6A00;}
      }
    }
    .right-box{
      height: calc( 100vh - 170rpx);
      .dd{padding: 30rpx 20rpx; border-top: 10rpx solid #f5f5f5; position: relative;}
      .btns{position: absolute; right: 20rpx; bottom: 36rpx; z-index: 999;}
      .zb-btn{width: 140rpx; border-radius: 8rpx; height: 56rpx; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 26rpx; margin-top: 10rpx;}
      .zb-btn1{background-color: #FF6A00; color: #f5f5f5;}
      .zb-btn2{background-color: #409eff; color: #f5f5f5;}
      .li{margin-right: 20rpx;}
      .ico{width: 40rpx; height: 40rpx;}
      .p{margin-bottom: 10rpx;}
      .lab{color: #666;}
    }
    .red{color: #FF6A00;}
    .images{margin-top: 20rpx;}
    .up-btn{
      position: relative; z-index: 1; width: 160rpx;
      .bg{position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 100%;}
    }
  }
  // /deep/.upload-list{
  //   .dd{width: ;}
  // }

</style>
